/**
 * 目标1：默认显示-北京市天气
 *  1.1 获取北京市天气数据
 *  1.2 数据展示到页面
 */
function getWeather(cityCode) {
  myAxios({
    url: 'https://hmajax.itheima.net/api/weather',
    params: {
      city: cityCode
    }
  }).then(result => {
    // console.log(result);
    console.log(result.data);
    const wObj = result.data
    const { area, date, dateShort, dateLunar, psPm25, psPm25Level, temperature, weather, weatherImg, windDirection, windPower, todayWeather, dayForecast } = wObj
    const wStr = `<span class="dateShort">${dateShort}</span>
            <span class="calendar">农历&nbsp;
            <span class="dateLunar">${dateLunar}</span>
            </span>`

    const wBox = `<div class="tem-box">
      <span class="temp">
        <span class="temperature">${temperature}</span>
        <span>°</span>
      </span>
    </div>
    <div class="climate-box">
      <div class="air">
        <span class="psPm25">${psPm25}</span>
        <span class="psPm25Level">${psPm25Level}</span>
      </div>
      <ul class="weather-list">
        <li>
          <img src=${weatherImg} alt="">
          <span class="weather">${weather}</span>
        </li>
        <li class="windDirection">${windDirection}</li>
        <li class="windPower">${windPower}</li>
      </ul>
    </div>
 `

    const tWeather = `
 <div class="range-box">
   <span>今天：</span>
   <span class="range">
     <span class="weather">${todayWeather.weather}</span>
     <span class="temNight">${todayWeather.temNight}</span>
     <span>-</span>
     <span class="temDay">14</span>
     <span>℃</span>
   </span>
 </div>
 <ul class="sun-list">
   <li>
     <span>紫外线</span>
     <span class="ultraviolet">${todayWeather.ultraviolet}</span>
   </li>
   <li>
     <span>湿度</span>
     <span class="humidity">${todayWeather.humidity}</span>%
   </li>
   <li>
     <span>日出</span>
     <span class="sunriseTime">${todayWeather.sunriseTime}</span>
   </li>
   <li>
     <span>日落</span>
     <span class="sunsetTime">${todayWeather.sunsetTime}</span>
   </li>
 </ul>`
    document.querySelector('.title').innerHTML = wStr
    document.querySelector('.weather-box').innerHTML = wBox
    document.querySelector('.today-weather').innerHTML = tWeather
    const dayForecastStr = dayForecast.map((item) => {
      return `<li class="item">
       <div class="date-box">
         <span class="dateFormat">${item.dateFormat}</span>
         <span class="date">${item.date}</span>
       </div>
       <img src=${item.weatherImg} alt="" class="weatherImg">
       <span class="weather">${item.weather}</span>
       <div class="temp">
         <span class="temNight">${item.temNight}</span>-
         <span class="temDay">${item.temDay}</span>
         <span>℃</span>
       </div>
       <div class="wind">
         <span class="windDirection">${item.windDirection}</span>
         <span class="windPower">${item.windPower}</span>
       </div>
     </li>`
    }).join('')

    // console.log(dayForecastStr);
    document.querySelector('.week-wrap').innerHTML = dayForecastStr
  })

}
getWeather(110100)

//搜索框

document.querySelector('.search-city').addEventListener('input', (e) => {
  console.log(e.target.value);
  myAxios({
    url: 'https://hmajax.itheima.net/api/weather/city',
    params: {
      city: e.target.value
    }
  }).then(result => {
    console.log(result.data);
    const strData = result.data.map(item => {
      console.log(item.name);
      return `<li class="city-item" data-code=${item.code}>${item.name}</li>`
    }).join('')
    document.querySelector('.search-list').innerHTML = strData
  })
})
//点击城市名进行搜索
document.querySelector('.search-list').addEventListener('click', (e) => {
  if (e.target.classList.contains('city-item')) {
    console.log(e.target.dataset.code);
    const cityCode = e.target.dataset.code
    getWeather(cityCode)
  }
})

